<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加/修改页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .left {
            margin-right: 15px;
            border: 1px solid #EBEEF5;
            overflow: auto;
        }

        .Layer .el-descriptions .is-bordered .el-descriptions-item__cell {
            padding: 10px 0 0 10px !important;
        }

        .Item {
            width: 200px;
            border: 1px solid #ebeef5;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 10px 10px 0;
            cursor: pointer;
            background-color: #f5f7fa;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>{{(action == 'Add'?'添加':'修改')}}仓库信息</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->
                <div id="form"
                    :data-options="JSON.stringify({'tableName':'warehouse','formName':'dataForm' ,'primaryKey':'Warehouse_SerialNumber'})">
                </div>
                <div class="table_titel">
                    <div class="titel">仓库信息</div>
                </div>
                <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">仓库名称</div>
                            </template>
                            <el-form-item prop="Warehouse_Name">
                                <el-input disabled v-model.trim="dataForm.Warehouse_Name" placeholder="请输入账号" />
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
                <div v-if="type == '0'">
                    <div class="table_titel">
                        <div class="titel">仓库配置</div>
                    </div>
                    <el-tabs v-model="activeName" type="card" editable @edit="handleTabsEdit">
                        <el-tab-pane :label="obj.Warehouse_Region_Name" :name="obj.id" v-for="(obj,index) in childDataForm"
                            :key="index">
                            <el-form :model="obj" :ref="'form' + index" :inline-message="true" style="width: 100%;">
                                <el-descriptions :column="6" size="large" direction="vertical" border>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <div class="cell-item">分区名称</div>
                                        </template>
                                        <el-form-item prop="Warehouse_Region_Name">
                                            <el-input v-model.trim="obj.Warehouse_Region_Name" placeholder="请输入分区名称" />
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <div class="cell-item">项道数</div>
                                        </template>
                                        <el-form-item prop="Passageway_Number">
                                            <el-input @change="changeConfig(obj)" v-model.trim="obj.Passageway_Number"
                                                placeholder="请输入项道数" type="number" />
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <div class="cell-item">默认货位列数</div>
                                        </template>
                                        <el-form-item prop="Columns_Number">
                                            <el-input @change="changeConfig(obj)" v-model.trim="obj.Columns_Number"
                                                placeholder="请输入默认货位列数" type="number" />
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <div class="cell-item">默认货位行数</div>
                                        </template>
                                        <el-form-item prop="Rows_Number">
                                            <el-input @change="changeConfig(obj)" v-model.trim="obj.Rows_Number"
                                                placeholder="请输入默认货位行数" type="number" />
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <div class="cell-item">默认托盘数</div>
                                        </template>
                                        <el-form-item prop="Rows_Number">
                                            <el-input @change="changeConfig(obj)" v-model.trim="obj.Pallet_Number"
                                                placeholder="请输入默认托盘数" type="number" />
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <div class="cell-item">默认深度（托盘）</div>
                                        </template>
                                        <el-form-item prop="Height_Number">
                                            <el-input @change="changeConfig(obj)" v-model.trim="obj.Height_Number"
                                                placeholder="请输入默认深度（托盘）" type="number" />
                                        </el-form-item>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </el-form>
                            <el-descriptions v-for="(item, index) in obj.Detail" :key="index" :column="4" size="large"
                                border style="margin-top: 15px;">
                                <el-descriptions-item :span="2">
                                    <template slot="label">
                                        <div class="cell-item">项道类型</div>
                                    </template>
                                    <el-radio-group v-model="item.Storage_Type" style="padding: 10px;">
                                        <el-radio label="0">左右侧货架</el-radio>
                                        <el-radio label="1">仅左侧货架</el-radio>
                                        <el-radio label="2">仅右侧货架</el-radio>
                                    </el-radio-group>
                                </el-descriptions-item>
                                <el-descriptions-item :span="2">
                                    <template slot="label">
                                        <div class="cell-item">项道名称</div>
                                    </template>
                                    <el-input v-model.trim="item.Passageway_Name" placeholder="请输入项道名称" />
                                </el-descriptions-item>
                                <el-descriptions-item :span="2">
                                    <template slot="label">
                                        <div class="cell-item">托盘数</div>
                                    </template>
                                    <el-input v-model.trim="item.Pallet_Number" placeholder="请输入托盘数" type="number" />
                                </el-descriptions-item>
                                <el-descriptions-item :span="2">
                                    <template slot="label">
                                        <div class="cell-item">深度（托盘）</div>
                                    </template>
                                    <el-input v-model.trim="item.Pallet_Number" placeholder="请输入深度（托盘）" type="number" />
                                </el-descriptions-item>
                                <el-descriptions-item v-if="item.Storage_Type == '0' || item.Storage_Type == '1'">
                                    <template slot="label">
                                        <div class="cell-item">左侧货位列数</div>
                                    </template>
                                    <el-input v-model.trim="item.Left_Columns_Number" placeholder="请输入货位列数" type="number" />
                                </el-descriptions-item>
                                <el-descriptions-item v-if="item.Storage_Type == '0' || item.Storage_Type == '1'">
                                    <template slot="label">
                                        <div class="cell-item">左侧货位行数</div>
                                    </template>
                                    <el-input v-model.trim="item.Left_Rows_Number" placeholder="请输入货位行数" type="number" />
                                </el-descriptions-item>
                                <el-descriptions-item v-if="item.Storage_Type == '0' || item.Storage_Type == '2'">
                                    <template slot="label">
                                        <div class="cell-item">右侧货位列数</div>
                                    </template>
                                    <el-input v-model.trim="item.Right_Columns_Number" placeholder="请输入货位列数"
                                        type="number" />
                                </el-descriptions-item>
                                <el-descriptions-item v-if="item.Storage_Type == '0' || item.Storage_Type == '2'">
                                    <template slot="label">
                                        <div class="cell-item">右侧货位行数</div>
                                    </template>
                                    <el-input v-model.trim="item.Right_Rows_Number" placeholder="请输入货位行数" type="number" />
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">仓库预览图</div>
                            </div>
                            <el-descriptions :column="1" size="large" border v-for="(item, index) in obj.Detail"
                                :key="index">
                                <el-descriptions-item>
                                    <template slot="label">
                                        <div class="cell-item">{{item.Passageway_Name}}</div>
                                    </template>
                                    <el-descriptions :column="2" size="large" border>
                                        <el-descriptions-item v-if="item.Storage_Type == '0' || item.Storage_Type == '1'">
                                            <template slot="label">
                                                <div class="cell-item">左侧货位</div>
                                            </template>
                                            <el-descriptions class="Layer" :column="1" size="large" border>
                                                <el-descriptions-item v-for="y in Number(item.Left_Rows_Number)" :key="y">
                                                    <template slot="label">
                                                        <div class="cell-item">第{{y}}层</div>
                                                    </template>
                                                    <div style="display: flex; flex-wrap: wrap;">
                                                        <div class="Item" v-for="x in Number(item.Left_Columns_Number)"
                                                            :key="x" @click="handlePallet(item, y, 2*x-1)">
                                                            <div
                                                                style="display: flex; margin: 0 5px; padding: 5px 0; min-height: 50px;width: calc(100% - 10px);">
                                                                <div v-for="z in Number(Customize(item, y, 2*x-1).Pallet_Number) || Number(item.Pallet_Number)"
                                                                    :key="z"
                                                                    style="display: flex; flex-direction: column; justify-content: center; align-items: center;background-color: #fff; border: 1px solid #EBEEF5;width: 100%;">
                                                                    <div v-for="h in Number(Customize(item, y, 2*x-1).Height_Number) || Number(item.Height_Number)"
                                                                        :key="h"
                                                                        style="margin: 5px 5px 0; width: calc(100% - 10px);height: 10px; border: 1px solid #ebeef5;">
                                                                    </div>
                                                                    <span style="color:#606266;font-size: 12px;">{{y}}{{
                                                                        2*x-1 }}-{{z}}</span>
                                                                    <span style="color:#606266;font-size: 10px;">托盘</span>
                                                                </div>
                                                            </div>
                                                            <div style="height: 50px; line-height: 50px;">
                                                                <span
                                                                    style="color:#606266; font-weight: bold;font-size: 14px;">{{y}}{{
                                                                    2*x-1 }}号货位</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </el-descriptions-item>
                                        <el-descriptions-item v-if="item.Storage_Type == '0' || item.Storage_Type == '2'">
                                            <template slot="label">
                                                <div class="cell-item">右侧货位</div>
                                            </template>
                                            <el-descriptions class="Layer" :column="1" size="large" border>
                                                <el-descriptions-item v-for="y in Number(item.Right_Rows_Number)" :key="y">
                                                    <template slot="label">
                                                        <div class="cell-item">第{{y}}层</div>
                                                    </template>
                                                    <div style="display: flex; flex-wrap: wrap;">
                                                        <div class="Item" v-for="x in Number(item.Right_Columns_Number)"
                                                            :key="x" @click="handlePallet(item, y, 2*x)">
                                                            <div
                                                                style="display: flex; margin: 0 5px; padding: 5px 0; min-height: 50px;width: calc(100% - 10px);">
                                                                <div v-for="z in Number(Customize(item, y, 2*x).Pallet_Number) || Number(item.Pallet_Number)"
                                                                    :key="z"
                                                                    style="display: flex; flex-direction: column; justify-content: center; align-items: center;background-color: #fff; border: 1px solid #EBEEF5;width: 100%;">
                                                                    <div v-for="h in Number(Customize(item, y, 2*x).Height_Number) || Number(item.Height_Number)"
                                                                        :key="h"
                                                                        style="margin: 5px 5px 0; width: calc(100% - 10px);height: 10px; border: 1px solid #ebeef5;">
                                                                    </div>
                                                                    <span style="color:#606266;font-size: 12px;">{{y}}{{ 2*x
                                                                        }}-{{z}}</span>
                                                                    <span style="color:#606266;font-size: 10px;">托盘</span>
                                                                </div>
                                                            </div>
                                                            <div style="height: 50px; line-height: 50px;">
                                                                <span style="color:#606266"
                                                                    style="font-weight: bold;font-size: 14px;">{{y}}{{ 2*x
                                                                    }}号货位</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </el-descriptions-item>
                                    </el-descriptions>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div v-else-if="type == '1'">
                    <div class="table_titel">
                        <div class="titel">仓库预览图</div>
                    </div>
                    <el-row type="flex">
                        <el-col :md="5" :sm="8" :xs="0" class="left">
                            <el-tree ref="tree" :default-expand-all="false" :expand-on-click-node="false" id="tree"
                                style="max-width: 600px" :data="treeData" @node-click="handleNodeClick" node-key="Warehouse_Region_SerialNumber"
                                :props="{ label: 'Warehouse_Region_Name' }" highlight-current>
                            </el-tree>
                        </el-col>
                        <el-col :md="19" :sm="16" :xs="24" class="right">
                            <el-descriptions :column="1" size="large" border v-for="(item, index) in Preview" :key="index">
                                <el-descriptions-item>
                                    <template slot="label">
                                        <div class="cell-item">{{item.Passageway_Name}}</div>
                                    </template>
                                    <el-descriptions :column="2" size="large" border>
                                        <el-descriptions-item v-if="item.Storage_Type == '0' || item.Storage_Type == '1'">
                                            <template slot="label">
                                                <div class="cell-item">左侧货位</div>
                                            </template>
                                            <el-descriptions class="Layer" :column="1" size="large" border>
                                                <el-descriptions-item v-for="y in Number(item.Left_Rows_Number)" :key="y">
                                                    <template slot="label">
                                                        <div class="cell-item">第{{y}}层</div>
                                                    </template>
                                                    <div style="display: flex; flex-wrap: wrap;">
                                                        <div class="Item" v-for="x in Number(item.Left_Columns_Number)"
                                                            :key="x">
                                                            <div
                                                                style="display: flex; margin: 0 5px; padding: 5px 0; min-height: 50px;width: calc(100% - 10px);">
                                                                <div v-for="z in Number(Customize(item, y, 2*x-1).Pallet_Number) || Number(item.Pallet_Number)"
                                                                    :key="z"
                                                                    style="display: flex; flex-direction: column; justify-content: center; align-items: center;background-color: #fff; border: 1px solid #EBEEF5;width: 100%;">
                                                                    <div v-for="h in Number(Customize(item, y, 2*x-1).Height_Number) || Number(item.Height_Number)"
                                                                        :key="h"
                                                                        style="margin: 5px 5px 0; width: calc(100% - 10px);height: 10px; border: 1px solid #ebeef5;">
                                                                    </div>
                                                                    <span style="color:#606266;font-size: 12px;">{{y}}{{
                                                                        2*x-1 }}-{{z}}</span>
                                                                    <span style="color:#606266;font-size: 10px;">托盘</span>
                                                                </div>
                                                            </div>
                                                            <div style="height: 50px; line-height: 50px;">
                                                                <span
                                                                    style="color:#606266; font-weight: bold;font-size: 14px;">{{y}}{{
                                                                    2*x-1 }}号货位</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </el-descriptions-item>
                                        <el-descriptions-item v-if="item.Storage_Type == '0' || item.Storage_Type == '2'">
                                            <template slot="label">
                                                <div class="cell-item">右侧货位</div>
                                            </template>
                                            <el-descriptions class="Layer" :column="1" size="large" border>
                                                <el-descriptions-item v-for="y in Number(item.Right_Rows_Number)" :key="y">
                                                    <template slot="label">
                                                        <div class="cell-item">第{{y}}层</div>
                                                    </template>
                                                    <div style="display: flex; flex-wrap: wrap;">
                                                        <div class="Item" v-for="x in Number(item.Right_Columns_Number)"
                                                            :key="x">
                                                            <div
                                                                style="display: flex; margin: 0 5px; padding: 5px 0; min-height: 50px;width: calc(100% - 10px);">
                                                                <div v-for="z in Number(Customize(item, y, 2*x).Pallet_Number) || Number(item.Pallet_Number)"
                                                                    :key="z"
                                                                    style="display: flex; flex-direction: column; justify-content: center; align-items: center;background-color: #fff; border: 1px solid #EBEEF5;width: 100%;">
                                                                    <div v-for="h in Number(Customize(item, y, 2*x).Height_Number) || Number(item.Height_Number)"
                                                                        :key="h"
                                                                        style="margin: 5px 5px 0; width: calc(100% - 10px);height: 10px; border: 1px solid #ebeef5;">
                                                                    </div>
                                                                    <span style="color:#606266;font-size: 12px;">{{y}}{{ 2*x
                                                                        }}-{{z}}</span>
                                                                    <span style="color:#606266;font-size: 10px;">托盘</span>
                                                                </div>
                                                            </div>
                                                            <div style="height: 50px; line-height: 50px;">
                                                                <span style="color:#606266"
                                                                    style="font-weight: bold;font-size: 14px;">{{y}}{{ 2*x
                                                                    }}号货位</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </el-descriptions-item>
                                    </el-descriptions>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-col>
                    </el-row>
                </div>
                <el-dialog :title="'自定义' + selectDetail.Passageway_Name + this.selectStorage + '货位'"
                    :visible.sync="dialogVisible" width="700px">
                    <el-descriptions
                        v-for="(item, index) in selectDetail.Customize.filter(i => `${i.Rows}-${i.Columns}` == selectStorage)"
                        :key="index" class="Layer" :column="1" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">托盘数</div>
                            </template>
                            <el-input v-model.trim="item.Pallet_Number" placeholder="请输入托盘数" type="number" />
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">深度（托盘）</div>
                            </template>
                            <el-input v-model.trim="item.Height_Number" placeholder="请输入深度（托盘）" type="number" />
                        </el-descriptions-item>
                    </el-descriptions>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
                <el-button size="medium" type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/rights.js"></script>
</body>

</html>